<template>
  <div class="mt-8" v-loading="loading">
    <el-card>
      <template #header>
        <div class="card-header flex justify-between items-center">
          <el-button size="small" type="primary" @click="openClick"
            >新增</el-button
          >
          <el-tooltip class="box-item" effect="dark" content="刷新">
            <el-icon size="20" class="icon" @click="getData"
              ><Refresh
            /></el-icon>
          </el-tooltip>
        </div>
        <div class="flex justify-between items-center">
          <el-form ref="formRef" :model="Searchform" label-width="auto">
            <el-form-item label="关键字" prop="name" class="mt-4">
              <el-input
                placeholder="请输入关键字"
                :style="{ width: '250px', height: '24px' }"
                v-model="Searchform.keyword"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-form>
          <div class="flex justify-center items-center">
            <el-button type="primary" size="small" @click="handleSearch"
              >搜索</el-button
            >
            <el-button size="small">重置</el-button>
          </div>
        </div>
      </template>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column label="管理员" width="200px">
          <template #default="scope">
            <div class="flex justify-left items-center">
              <el-avatar :src="scope.row.avatar" size="40" />
              <div class="inform flex flex-col justify-center items-left ml-3">
                <div>{{ scope.row.username }}</div>
                <div class="Id">ID:{{ scope.row.role_id }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="roles" label="所属角色" width="380px">
          <template #default="scope">
            {{ scope.row.role.name }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="180px">
          <template #default="scope">
            <el-switch
              :modelValue="scope.row.status"
              style="
                --el-switch-on-color: rgb(135, 197, 235);
                --el-switch-off-color: #999;
              "
              :active-value="1"
              :inactive-value="0"
              @change="handleCahnge($event, scope.row)"
              :loading="scope.row.statusLoading"
              :disabled="scope.row.super === 1"
            />
          </template>
        </el-table-column>
        <el-table-column width="180px" align="center" label="操作">
          <template #default="scope">
            <div
              v-if="scope.row.super == 1"
              class="flex justify-center items-center text-gray-300"
            >
              暂无操作
            </div>
            <div v-else>
              <el-button
                size="small"
                type="text"
                @click="handleEdit(scope?.row)"
                >修改</el-button
              >
              <el-popconfirm
                title="确认删除该管理员吗？"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="handleDelete(scope?.row?.id)"
              >
                <template #reference>
                  <el-button size="small" type="text">删除</el-button>
                </template>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div class="flex justify-center items-center bg-light-100">
      <el-pagination
        background
        layout="prev,pager,next"
        :total="total"
        :current-page="currentPage"
        :page-size="limit"
        @current-change="getData"
      />
    </div>
    <!-- 弹框 -->
    <Formdrawer :title="drawerTitle" ref="drawerRef" @onSubmit="onSubmit">
      <el-form ref="formRef" :model="form" label-width="auto">
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="form.username"
            placeholder="请输入用户名"
          />
        </el-form-item>
        <el-form-item label="密码" prop="password">
            
          <el-input
             v-model="form.password"
            placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item label="头像" prop="avatar"> 
         <Imagechoose></Imagechoose>
        </el-form-item>
        <el-form-item label="所属角色" prop="role_id">
          <el-select v-model="form.role_id" placeholder="请选择">
            <el-option
              v-for="item in roles"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch
            v-model="form.status"
            style="
              --el-switch-on-color: rgb(135, 197, 235);
              --el-switch-off-color: #999;
            "
            :active-value="1"
            :inactive-value="0"
            @change="statusClick($event)"
          />
        </el-form-item>
      </el-form>
    </Formdrawer>
  </div>
</template>

<script setup>
import { computed, reactive, ref } from "vue";
import Formdrawer from "@/components/Formdrawer.vue";
import { addNotice } from "@/api/notice";
import { notify } from "@/composible/notify";
import {
  changeStatus,
  deleteManager,
  getManagerlist,
  changeManager,
  addManager,
} from "@/api/manager";
import Imagechoose from "@/components/ImageChoose.vue";
//分页
const currentPage = ref(1);
const total = ref(1);
const limit = ref(10);
const loading = ref(false);
const tableData = ref([]);
const roles = ref([]);
//form表单组件
const form = ref({
  username: '',
  password: "",
  role_id: "",
  status: 1,
  avatar: "",
});
//搜索
const Searchform = ref({
  limit: 10,
  keyword: "",
});
function handleSearch() {
  loading.value = true;
  getData();
  Searchform.value.keyword = "";
}

function getData(newpage = null) {
  if (typeof newpage === "number") {
    currentPage.value = newpage;
  }
  getManagerlist(currentPage.value, {
    limit: 10,
    keyword: Searchform.value ? Searchform.value.keyword : "",
  })
    .then((res) => {
      roles.value = res.roles;
      res.list.map((o) => {
        return (o.statusLoading = false);
      });
      tableData.value = res?.list;
      total.value = res?.totalCount;
    })
    .finally(() => {
      loading.value = false;
    });
}
getData();

//修改状态栏
function handleCahnge(statu, row) {
  row.statusLoading = true;
  changeStatus(row.id, statu)
      .then(() => {
          getData();
      notify("success", "修改成功");
    })
    .finally(() => {
      row.statusLoading = false;
    });
}

//删除管理员方法
function handleDelete(id) {
  loading.value = true;
  deleteManager(id)
    .then((res) => {
      notify("success", "删除成功");
      getData();
    })
    .finally(() => {
      loading.value = false;
    });
}

//方法：修改和新增共用一个drawer
const editId = ref(0);
const drawerTitle = computed(() => {
  return editId.value ? "修改" : "新增";
});
function handleEdit(row) {
  editId.value = row?.id;
  drawerRef.value.open();
  resetForm(row);
}

//打开弹框方法
//新增打开弹框
//重置form表单内容和标题
const formRef = ref(null);
function resetForm(row = null) {
  if (formRef.value) formRef.value.clearValidate();
  if (row) {
    for (const key in form) {
      form[key] = row[key];
    }
  }
}
const drawerRef = ref(null);
function openClick() {
  editId.value = 0;
  resetForm();
  drawerRef.value.open();
}

//确认方法
const onSubmit = () => {
  drawerRef.value.showLoading();
  const fun = editId.value ? changeManager(editId.value, form.value) :addManager(form.value);
  fun
    .then((res) => {
      notify("success", drawerTitle.value + "成功");
      getData();
      drawerRef.value.close();
    })
    .finally(() => {
      drawerRef.value.closeLoading();
    });
};

//修改表单的状态
function statusClick(statu)
{
    form.value.status = statu;
}

</script>

<style lang="less" scoped>
.icon {
  color: rgba(0, 187, 255, 0.619);
}

.Id {
  font-size: 12px;
}
</style>